<template>
	<view>
		<image src="../../static/login_bottom.png" mode="" class="bottom_img"></image>
		<view class="form_box">
			<view class="title">使用手机号注册</view>
			<view class="form_item">
				<u-input v-model="phone" type="number" :custom-style="{ 'font-size': '15px' }" placeholder="请输入手机号码" />
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
					<u-button size="mini" @tap="getCode" hover-class="none">{{ tips }}</u-button>
				</view>
			</view>
			<view class="form_item"><u-input v-model="code" type="text" :custom-style="{ 'font-size': '15px' }" placeholder="请输入验证码" /></view>
			<view class="form_item"><u-input v-model="password" type="password" :custom-style="{ 'font-size': '15px' }" placeholder="请输入密码" /></view>
			<button type="default" class="btn" hover-class="none" @click="register">注册</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '',
			password: '',
			title: '',
			tips: '',
			seconds: 10,
			code: ''
		};
	},
	methods: {
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			// this.$u.toast('倒计时结束');
		},
		start() {
			// this.$u.toast('倒计时开始');
		},
		register() {
			uni.navigateTo({
				url: '../login/login'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.bottom_img {
	position: fixed;
	width: 100%;
	height: 230upx;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.form_box {
	padding: 10upx 60upx;
	.title {
		font-size: 34upx;
		color: #2e2e2e;
		margin: 40upx 0 200upx 0;
	}
	.form_item {
		display: flex;
		align-items: center;
		padding: 15upx 0;
		border-bottom: 2upx solid #eeeeee;
		font-size: 30upx;
		input {
			width: 100%;
		}
	}
	.btn {
		margin: 100upx 0 35upx 0;
		width: 100%;
		height: 60upx;
		border-radius: 8upx;
		font-size: 32upx;
		line-height: 60upx;
		color: #ffffff;
		background: #373846;
		border: none;
		&::after {
			border: none;
		}
	}
}
</style>
